<template>
  <el-switch class="switchXV3" v-model="switchValue"
             v-bind="$attrs"
             :active-text="props.isI18n && typeof($t)=='function' ?$t(props.onText):props.onText"
             :inactive-text="props.isI18n && typeof($t)=='function' ?$t(props.offText):props.offText"
             :inline-prompt="props.inline"
             :active-value="props.onValue" :inactive-value="props.offValue"
             :style="{
                   '--el-switch-on-color': props.onColor,
                   '--el-switch-off-color': props.offColor}"
             @change="changeFn"/>
</template>

<script setup>
import { ref,watch,computed } from 'vue'
import { ElSwitch } from 'element-plus'

const props = defineProps({
  // 开时：(图像在右边)
  modelValue: {
    type: [String, Number, Boolean, Object,undefined,null],
    default: 0
  },
  // 处于非开的值的列表。是列表其中一个就是非开状态
  offList: {
    type: Object,
    // default: [0, false, '', undefined, '-1', '0', -1, 'false',null]
    default: [1,true]
  },

  // region 开关按钮
  // 开背景色
  onColor: {
    type: String,
    default: '#13ce66'
  },
  // 开关景色
  offColor: {
    type: String,
    default: '#ff4949'
  },
  // 开时的返回值
  onValue: {
    type: [String, Number, Object, Boolean],
    default: 0
  },
  // 关时的返回值
  offValue: {
    type: [String, Number, Object, Boolean],
    default: 1
  },

  // 开时的文字
  onText: {
    type: String,
    default: 'tableText.stopValue2'
  },
  // 关时的文字
  offText: {
    type: String,
    default: 'tableText.stopValue1'
  },

  // 国际化
  isI18n: {
    type: Boolean,
    default: true
  },

  // endregion

  // 位置显示位置
  inline: {
    type: Boolean,
    default: true
  },

  // 宽度
  width: {
    type: [String,Number],
    default: 'auto'
   },
})

const emit = defineEmits(['update:modelValue', 'change'])

// region 工具

// 将字符串或数值转换带单位的字符串
function getPx(text, defaultPx = 'px') {
  let tempList = ['px', 'rpx', 'vw', 'vh', '%', 'em', 'auto']
  if (typeof text == 'string') {
    const havePx = tempList.find(row => text.includes(row))
    if (havePx) {
      return text
    } else {
      return `${parseFloat(text)}${defaultPx}`
    }
  } else if (typeof text == 'number') {
    let temp = parseFloat(text)
    return `${temp}${defaultPx}`
  }
  return text
}

// endregion


// region 宽度
const widthD = computed(() => {
  return getPx(props.width)
})
// endregion


// region 绑定的值
// 绑定的值
const switchValue = ref(props.offValue)

// 转换值，根据onValue和offValue进行转换
const setValueFn = () => {
  props.offList.push(props.offValue)
  if (!props.offList.includes(props.modelValue)) {
    switchValue.value = props.onValue
  } else {
    switchValue.value = props.offValue
  }
}

watch(() => props.modelValue, (newV, oldV) => {
  setValueFn()
}, {immediate: true, deep: true})
watch(() => switchValue.value, (newV, oldV) => {
  emit('update:modelValue', newV)
}, {immediate: true, deep: true})

// endregion


// region 事件
const changeFn = () => {
  emit('update:modelValue', switchValue.value)
  emit('change', switchValue.value)
}
// endregion

// region 国际化

// endregion

</script>

<style scoped lang='scss'>
.switchXV3 {
  :deep(.el-switch__core) {
    width: v-bind(widthD) !important;
  }
}
</style>